import React from 'react';
import { Modal, Descriptions, Button, Tag } from 'antd';
import moment from 'moment';

/**
 * 活动详情弹窗组件
 * @param {object} props - 组件属性
 * @param {boolean} props.visible - 弹窗是否可见
 * @param {function} props.onCancel - 关闭弹窗的回调函数
 * @param {object} props.activity - 当前活动详情
 * @param {Array} props.stores - 门店列表
 * @param {Array} props.venues - 场地列表
 * @returns {JSX.Element}
 */
const ActivityDetailModal = ({ visible, onCancel, activity, stores, venues }) => {
  if (!activity) {
    return null;
  }

  return (
    <Modal
      title="活动详情"
      visible={visible}
      onCancel={onCancel}
      footer={[
        <Button key="close" onClick={onCancel}>
          关闭
        </Button>,
      ]}
      width={800}
    >
      <Descriptions bordered column={2}>
        <Descriptions.Item label="活动名称">{activity.name}</Descriptions.Item>
        <Descriptions.Item label="活动类型">
          {{
            0: '折扣',
            1: '满减',
            2: '满赠',
            3: '优惠券',
          }[activity.type] || activity.type}
        </Descriptions.Item>
        <Descriptions.Item label="开始时间">{moment.unix(activity.start_time).format('YYYY-MM-DD HH:mm:ss')}</Descriptions.Item>
        <Descriptions.Item label="结束时间">{moment.unix(activity.end_time).format('YYYY-MM-DD HH:mm:ss')}</Descriptions.Item>
        <Descriptions.Item label="状态">
          <Tag color={activity.status === 1 ? 'green' : 'red'}>
            {activity.status === 1 ? '启用' : '禁用'}
          </Tag>
        </Descriptions.Item>
        <Descriptions.Item label="创建时间">{moment.unix(activity.created_at).format('YYYY-MM-DD HH:mm:ss')}</Descriptions.Item>
        {activity.type === 1 && ( // 满减类型
          <>
            <Descriptions.Item label="满减金额">满{(activity.min_amount / 100).toFixed(2)}减{(activity.discount_rate / 100).toFixed(2)}</Descriptions.Item>
          </>
        )}
        {activity.type === 0 && ( // 折扣类型
          <>
            <Descriptions.Item label="折扣率">{(activity.discount_rate / 10).toFixed(1)}折</Descriptions.Item>
            <Descriptions.Item label="最低消费">{activity.min_amount ? `¥${(activity.min_amount / 100).toFixed(2)}` : '无限制'}</Descriptions.Item>
          </>
        )}
        {activity.type === 3 && (
          <>
            <Descriptions.Item label="关联优惠券" span={2}>
              {activity.coupons?.map(coupon => (
                <Tag key={coupon.id} color="blue">{coupon.name}</Tag>
              ))}
              {(!activity.coupons || activity.coupons.length === 0) && '无关联优惠券'}
            </Descriptions.Item>
          </>
        )}
        <Descriptions.Item label="可用星期" span={2}>
          {activity.available_weekdays && JSON.parse(activity.available_weekdays).map(day => `周${{0:'日',1:'一',2:'二',3:'三',4:'四',5:'五',6:'六'}[day]}`).join(', ')}
        </Descriptions.Item>
        <Descriptions.Item label="可用时段" span={2}>
          {activity.available_times && JSON.parse(activity.available_times).map(t => `${t.start}-${t.end}`).join(', ')}
        </Descriptions.Item>
        <Descriptions.Item label="适用范围" span={2}>
          {{
            0: '全场通用',
            1: '指定门店',
            2: '指定包厢',
          }[activity.applicable_type]}
        </Descriptions.Item>
        {activity.applicable_type === 1 && (
          <Descriptions.Item label="适用门店" span={2}>
            {activity.applicable_ids && stores.filter(s => JSON.parse(activity.applicable_ids).includes(s.id)).map(s => <Tag key={s.id}>{s.name}</Tag>)}
          </Descriptions.Item>
        )}
        {activity.applicable_type === 2 && (
          <Descriptions.Item label="适用场地" span={2}>
            {activity.applicable_ids && venues.filter(v => JSON.parse(activity.applicable_ids).includes(v.id)).map(v => <Tag key={v.id}>{v.name}</Tag>)}
          </Descriptions.Item>
        )}
        <Descriptions.Item label="活动描述" span={2}>{activity.description || '-'}</Descriptions.Item>
      </Descriptions>
    </Modal>
  );
};

export default ActivityDetailModal;